<template>
  <div class="language-switcher">
    <button 
      @click="toggleLanguage" 
      :class="['language-btn', buttonClass]"
      :disabled="disabled"
    >
      <span class="language-text">中文/English</span>
      <span class="language-icon">🌐</span>
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  // 按钮类型：primary, default, text, outline
  type: {
    type: String,
    default: 'default'
  },
  // 按钮大小：large, default, small
  size: {
    type: String,
    default: 'default'
  },
  // 自定义样式类
  customClass: {
    type: String,
    default: ''
  },
  // 是否显示为文本按钮
  text: {
    type: Boolean,
    default: false
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
})

const store = useStore()

// 计算属性
const currentLanguage = computed(() => store.getters.currentLanguage)
const buttonClass = computed(() => {
  const classes = [props.type, props.size]
  if (props.text) classes.push('text')
  if (props.customClass) classes.push(props.customClass)
  return classes.join(' ')
})

// 获取当前语言的文本
const getCurrentText = (chineseText, englishText) => {
  if (!chineseText || !englishText) return chineseText || englishText || ''
  return currentLanguage.value === 'zh' ? chineseText : englishText
}

// 切换语言
const toggleLanguage = () => {
  if (!props.disabled) {
    store.dispatch('toggleLanguage')
  }
}
</script>

<style scoped lang="scss">
.language-switcher {
  display: inline-block;
  
  .language-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    outline: none;
    
    // 默认尺寸
    padding: 16px 32px;
    font-size: 18px;
    min-height: 52px;
    
    // 悬停效果
    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    // 点击效果
    &:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    // 禁用状态
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }
    
    // 焦点状态
    &:focus-visible {
      outline: 2px solid #667eea;
      outline-offset: 2px;
    }
    
    .language-text {
      font-size: inherit;
      font-weight: inherit;
    }
    
    .language-icon {
      font-size: 20px;
      line-height: 1;
      transition: transform 0.3s ease;
    }
    
    &:hover:not(:disabled) .language-icon {
      transform: rotate(15deg);
    }
  }
  
  // 尺寸变体
  .small {
    padding: 12px 24px;
    font-size: 16px;
    min-height: 44px;
    
    .language-icon {
      font-size: 18px;
    }
  }
  
  .large {
    padding: 20px 36px;
    font-size: 20px;
    min-height: 60px;
    
    .language-icon {
      font-size: 22px;
    }
  }
  
  // 类型变体
  .default {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    
    &:hover:not(:disabled) {
      border-color: #667eea;
      color: #667eea;
    }
  }
  
  .primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    
    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    }
  }
  
  .text {
    background: transparent;
    color: #667eea;
    border: none;
    padding: 4px 8px;
    min-height: auto;
    
    &:hover:not(:disabled) {
      background: rgba(102, 126, 234, 0.1);
      color: #5a6fd8;
      transform: none;
      box-shadow: none;
    }
  }
  
  .outline {
    background: transparent;
    color: #667eea;
    border: 1px solid #667eea;
    
    &:hover:not(:disabled) {
      background: #667eea;
      color: #ffffff;
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .language-btn {
      padding: 12px 24px;
      font-size: 16px;
      min-height: 44px;
      
      .language-icon {
        font-size: 18px;
      }
    }
    
    .small {
      padding: 10px 20px;
      font-size: 14px;
      min-height: 36px;
      
      .language-icon {
        font-size: 16px;
      }
    }
    
    .large {
      padding: 16px 28px;
      font-size: 18px;
      min-height: 52px;
      
      .language-icon {
        font-size: 20px;
      }
    }
  }
}
</style>